<template>
  <div class="header">
    <!-- 11-30 18：46 -->
    <input
      v-model="searchValue"
      @blur="searchChange"
      placeholder="请输入"
      type="text"
    />
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
export default {
  props: { valueS: String },
  setup(props, { emit }) {
    let store = useStore();

    let searchValue = ref();
    //  computed 要写在 ref 或者 reactive 里面

    // searchValue.value = computed(() => {
    //   return store.state.valuePshu;
    // });

    function searchChange() {
      console.log(searchValue.value);

      emit("searchChange", searchValue.value);
      if (searchValue.value != "" && typeof searchValue.value != "undefined") {
        store.commit("history", searchValue.value);
      }
    }
    return { searchValue, searchChange };
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  background-color: red;
  justify-content: center;

  input {
    width: 80%;
    height: 70%;
    border-radius: 50px;
    padding-left: 20px;
  }
}
</style>
